import { ProItem } from './index'
import type {
    ProObjProps,
    ProAryProps,
    ProEnumProps,
    ProIndexObjProps
} from '../types'
import css from './index.less'

import { getPinTypeStyle, getTypeTitleBySchema } from '../utils'
import { XPATH_ARRAY } from '../constants'
import { Button } from 'antd'

export function ProAry({items, xpath, ...other}: ProAryProps) {
    return items ? <ProItem val={items} xpath={`${xpath}/${XPATH_ARRAY}`} {...other} /> : null
}
  
export function ProObj({properties, xpath, ...other}: ProObjProps) {
    return properties ? (
        <>
        {
            Object.keys(properties).map((key) => {
                return <ProItem key={key} val={properties[key]} xpath={`${xpath}/${key}`} keyName={key} {...other} />
            })
        }
        {
            other.editor && <div className={`${css.item} ${css.editor}`}>
                <div data-xpath={xpath} className={css.keyName}>
                    <span className={css.addItem} onClick={() => {
                        other.onChange?.({
                            type: 'add',
                            path: xpath
                        })
                    }}>+</span>
                </div>
            </div>
        }
        </>
    ) : null
}

export function ProIndexObj({properties, xpath, ...other}: ProIndexObjProps) {
    return properties ? (
        <>
        <ProItem val={properties['key']} xpath={`${xpath}/[key]`} keyName={'索引'} {...other} />
        <ProItem val={properties['value']} xpath={`${xpath}/[value]`} keyName={'值'} {...other} />
        </>
    ) : null
}

export function ProEnum({items, ...other}: ProEnumProps) {
    return items ? (
        <>
        {
            items.map((item, idx) => {
            const { type, value } = item
            const style = getPinTypeStyle(type)
            const finalValue = item.type === 'string' ? `"${value}"` : value
        
            return (
                <div key={idx} className={`${css.item}`}>
                <div className={css.keyName}>
                    {finalValue}
                    <span className={css.typeName} style={{color: style.strokeColor}}>
                    ({getTypeTitleBySchema(item)})
                    </span>
                </div>
                </div>
            )
            })
        }
        </>
    ) : null
}